<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script src="./assets/lib/echarts/echarts.min.js"></script>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.querySelector('#main'));

      // 指定图表的配置项和数据
      const option = {
        // 设置线条颜色
        color: ['red', 'black'],
        title: {
          text: '薪资 Salary',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {},
        // 工具箱
        toolbox: {
          show: false,
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['陈强', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
          // axisLabel: {
          //   formatter: '{value} °C',
          // },
        },
        series: [
          {
            name: '期望薪资',
            type: 'line',
            smooth: true, // 线条平滑
            symbol: 'circle', // 实心
            data: [10, 11, 13, 11, 12, 12, 9],
            // markPoint: {
            //   data: [
            //     { type: 'max', name: 'Max' },
            //     { type: 'min', name: 'Min' },
            //   ],
            // },
            // markLine: {
            //   data: [{ type: 'average', name: 'Avg' }],
            // },
          },
          {
            name: '实际薪资',
            type: 'line',
            symbol: 'circle', // 实心

            smooth: true, // 线条平滑
            data: [1, -2, 2, 5, 3, 2, 0],
            // markPoint: {
            //   data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }],
            // },
            // markLine: {
            //   data: [
            //     { type: 'average', name: 'Avg' },
            //     [
            //       {
            //         symbol: 'none',
            //         x: '90%',
            //         yAxis: 'max',
            //       },
            //       {
            //         symbol: 'circle',
            //         label: {
            //           position: 'start',
            //           formatter: 'Max',
            //         },
            //         type: 'max',
            //         name: '最高点',
            //       },
            //     ],
            //   ],
            // },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
    
</body>
</html>